<template>
    <div class="student">
        <div class="box">
            <div class="title">
                <p>系部列表</p>
                <el-button type="primary" size="small" @click="add">添加系部</el-button>
            </div>
            <el-table :data="sdepts" stripe style="width: 100%">
                <el-table-column prop="id" label="id" width="80" />
                <el-table-column prop="name" label="系部名"/>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row)" type="text" size="medium">修改</el-button>
                        <el-button @click="del(scope.row.id)" type="text" size="medium" style="color: #e47470;">删除</el-button>
                        <el-button @click="open(scope.row)" type="text" size="medium" style="color: #FFD217;">查看班级</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="box">
            <div class="title">
                <p>{{ name }}</p>
                <el-button type="primary" size="small" @click="_add">添加班级</el-button>
            </div>
            <el-table :data="clases" stripe style="width: 100%">
                <el-table-column prop="id" label="id" width="80" />
                <el-table-column prop="name" label="系部名"/>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click="_edit(scope.row)" type="text" size="medium">修改</el-button>
                        <el-button @click="_del(scope.row.id)" type="text" size="medium" style="color: #e47470;">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import tool from '@/utils/tool';
import { mapState,mapActions } from 'vuex';
    export default {
        name: 'WebStudentClass',
        data() {
            return {
                id: 0,
                name: ''
            };
        },
        computed: {
            ...mapState('Student',['sdepts','clases'])
        },
        methods: {
            ...mapActions('Student',['getSdepts','addSdept','editSdept','delSdept','getClases','addClass','editClass','delClass']),
            add(){
                this.$prompt('请输入系部名', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    this.addSdept(value);
                })
            },
            edit({id,name}){
                this.$prompt('请输入系部名', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: name
                }).then(({ value }) => {
                    this.editSdept({id,name: value});
                })
            },
            del(id){
                this.$confirm('删除系部将会删除本系部下的所有班级, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delSdept(id);
                })
            },
            open({ id,name }){
                this.id = id;
                this.name = name;
                this.getClases(id);
            },
            _add(){
                let { name } = this;
                if (name) {
                    this.$prompt('请输入班级名', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        this.addClass({ sdept_id: this.id, name: value });
                    })
                } else tool.notif('warning','警告','请先选择系部');
            },
            _edit({ id,name }){
                this.$prompt('请输入系部名', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: name
                }).then(({ value }) => {
                    this.editClass({
                        class_id:id,
                        name: value,
                        sdept_id:this.id
                    });
                })
            },
            _del(id){
                this.$confirm('此操作将永久删除此班级, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delClass({ class_id: id,sdept_id: this.id });
                })
            },
        },
        mounted(){
            this.getSdepts();
        }
    };
</script>

<style lang="less" scoped>
    @import "asle/index.less";
    .student {
        .size();
        .df();
        .box {
            .size(40%,auto);
            .mar_r(20px);
            .title {
                .c(#888);
                .h(60px);
                .df();
                .f_ai();
                .f_jc(space-between);
            };
        }
    }
</style>